<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 50px;
            height: 50px;
        }
    </style>
</head>

<body>
    <!-- 
        图片也是有分辨率的，现在我们有一个50*50像素的图片
        而我们的PC端网页也需要一个50*50px的图片，
        50px = 50个物理像素


        手机端,css设置的50*50px的图片，在手机中要看DPR
        DPR：2.0
        50*50px = 100*100个物理像素进行表示，会导致图片模糊

        我们一般会提高图片的质量，你要50*50px的图片，
        我们就准备一个100*100分辨率的图片，通过css设置成50*50px
        在手段50*50px = 100*100物理像素，而我们的图片本来就是100*100分辨率的
        所以不会模糊

        我们在手机端准备图片的时候一般都会准备二倍图，或者更高质量的图片
     -->
    <img src="./imgs/img01.png" alt="">
    <img src="./imgs/img02.png" alt="">
    <img src="./imgs/img03.png" alt="">
</body>

</html>